<style>
    ul {
        color: #0095cb;
    }

    p, span {
        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /* 超出内容显示为省略号*/
        white-space: nowrap; /*文本不进行换行*/
    }

    .hot_ul_li {
        padding: 0;
    }
</style>
<div id="contentbody" class="marginbody">
    <template>

        <v-layout row wrap class="px-3 ">
            <v-flex xs12 md5 class="py-3 ">
                <v-carousel class="banner" hide-delimiters interval="3000" height="295"
                >
                    <v-carousel-item
                            v-for="(item,i) in banners"
                            :key="i"
                            :src="item.image"
                            @click="intopublish(item.content.cId)"
                    >
                        <v-layout align-end justify-start fill-height row wrap fluid style="margin-left: 15px">
                            <v-layout row style="background-color: rgba(255,255,255,0.64)">
                                <v-card style="background-color: rgba(255,255,255,0)" flat>
                                    <v-avatar size="64" style="margin-top: -24px" class="ml-3">
                                        <img :src="item.content.user.image">
                                    </v-avatar>
                                    <v-card-title style="margin-top: -10px" class="ml-3">
                                        <span class="blue--text ">{{item.content.user.username}}</span>
                                    </v-card-title>
                                </v-card>
                                <v-layout column>

                                    <span class="title ml-1">{{item.content.title}}</span>
                                    <v-flex xs2><p class="body-1  mt-2">
                                        {{removestyles(item.content.content)}}</p>

                                    </v-flex>
                                </v-layout>

                            </v-layout>
                        </v-layout>
                    </v-carousel-item>

                </v-carousel>
            </v-flex>
            <v-flex xs12 md7 class=" pt-3">
                <div class="white ml-1">
                    <ul class="white pt-2 pr-3" v-model="hot">
                        <v-layout row @click="intopublish(hot.cId)">
                            <img src="/LxCommunity/static/image/Hot.png">
                            <p class="black--text title" id="hot_first_title">{{hot.title}}</p>
                        </v-layout>
                        <p class="hot_first_body body-2 mt-1">{{hot_first_body}}</p>
                        <hr>
                        <li class="hot_ul_li ml-3 pr-3 mb-2" v-for="index in hotbody">
                            <v-layout @click="intopublish(index.cId)">
                                <span class="black--text">{{index.title}}</span>
                                <v-spacer></v-spacer>
                                <p>admin/10-10</p>
                            </v-layout>

                        </li>


                    </ul>
                </div>
            </v-flex>
        </v-layout>
        <v-layout row class="white">
            <v-flex xs4>
                <p class="chart z"
                   style="overflow-wrap: break-word; padding: 0px; margin: 0px; float: left; background: 0px 0px; color: rgb(153, 153, 153); font-family: &quot;Microsoft yahei&quot;; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
                <span class="deanjinri"
                      style="overflow-wrap: break-word; padding: 0px 0px 0px 40px; margin: 0px 20px 0px 0px; background: url(&quot;http://www.dmzshequ.com/template/ymg6.com_1490553956/deancss/forumindex/today.png&quot;) left center no-repeat; display: inline-block; text-align: center;">今日<br
                        style="overflow-wrap: break-word; padding: 0px; margin: 0px;">959</span><span class="deanzuori"
                                                                                                      style="overflow-wrap: break-word; padding: 0px 0px 0px 40px; margin: 0px 20px 0px 0px; background: url(&quot;http://www.dmzshequ.com/template/ymg6.com_1490553956/deancss/forumindex/yesterday.png&quot;) left center no-repeat; display: inline-block; text-align: center;">昨日<br
                        style="overflow-wrap: break-word; padding: 0px; margin: 0px;">1587</span><span
                        class="deantiezishu"
                        style="overflow-wrap: break-word; padding: 0px 0px 0px 40px; margin: 0px 20px 0px 0px; background: url(&quot;http://www.dmzshequ.com/template/ymg6.com_1490553956/deancss/forumindex/post.png&quot;) left center no-repeat; display: inline-block; text-align: center;">帖子<br
                        style="overflow-wrap: break-word; padding: 0px; margin: 0px;">2755416</span><span
                        class="deanshuzi"
                        style="overflow-wrap: break-word; padding: 0px 0px 0px 40px; margin: 0px 20px 0px 0px; background: url(&quot;http://www.dmzshequ.com/template/ymg6.com_1490553956/deancss/forumindex/huiyuan.png&quot;) left center no-repeat; display: inline-block; text-align: center;">会员<br
                        style="overflow-wrap: break-word; padding: 0px; margin: 0px;">120502</span></p>
            </v-flex>


            <v-spacer></v-spacer>
            <v-flex xs2>
                <div style="width:200px;display: flex;padding-left: 10px">
                    <span style="width: 70px;">公告：</span>
                    <marquee>欢迎您来到乐享社区</marquee>
                </div>

            </v-flex>
            <v-flex xs4 class="white">


                <a href="http://www.dmzshequ.com/forum.php?mod=guide&view=my" title="我的帖子" class="xi2"
                   style="overflow-wrap: break-word; padding: 0px; margin: 0px; color: rgb(40, 140, 230); text-decoration: none; transition: all 0.2s linear 0s;">我的帖子</a><span
                    class="pipe"
                    style="overflow-wrap: break-word; padding: 0px; margin: 0px 5px; color: rgb(204, 204, 204);">|</span><a
                    href="http://www.dmzshequ.com/forum.php?mod=guide&amp;view=new" title="最新回复" class="xi2"
                    style="overflow-wrap: break-word; padding: 0px; margin: 0px; color: rgb(40, 140, 230); text-decoration: none; transition: all 0.2s linear 0s;">最新回复</a><span>&nbsp;</span><span
                    class="pipe"
                    style="overflow-wrap: break-word; padding: 0px; margin: 0px 5px; color: rgb(204, 204, 204);">|</span>欢迎新会员:<span>&nbsp;</span><em
                    style="overflow-wrap: break-word; padding: 0px; margin: 0px; font-style: normal;"><a
                    href="http://www.dmzshequ.com/home.php?mod=space&amp;username=pxhc222" target="_blank" class="xi2"
                    style="overflow-wrap: break-word; padding: 0px; margin: 0px; color: rgb(85, 85, 85); text-decoration: none; transition: all 0.2s linear 0s;">pxhc222</a></em>


            </v-flex>
</v-layout>

<div v-for="programming in itemsbody">
    <div class="body_conter" style="margin-top: 10px">
        <v-flex>
            <v-card color="white" class="elevation-0">
                <v-layout row>
                    <v-flex xs5>
                        <div style="width: 5px;height:36px;background-color: #00acc1;float: left;margin-top: 10px;margin-left: 15px"></div>
                        <v-card-text class="ml-3">{{programming.forumtitle}}
                        </v-card-text>
                    </v-flex>
                    <v-spacer></v-spacer>
                    <v-flex xs1><img src="/LxCommunity/static/image/减.png" onclick="test(this)" class="mt-3">
                    </v-flex>
                </v-layout>
                <v-card-text style="margin: 0">
                    <hr style="height: 3px;margin-top: -15px">
                </v-card-text>

            </v-card>
        </v-flex>
    </div>
    <div style="margin-top: -10px">
        <v-layout
                xs12
                wrap
                class="white">
            <v-flex xs12 sm6 md4 lg3
                    v-for="item in programming.forumBodies"
            >
                <v-card style="height: 110px" class="elevation-0 mt-2">
                    <v-layout row style="margin:0 auto;margin-left: 5px">
                        <img class=" .img-responsive mx-2 ml-2"
                             :src="item.img"
                        >
                        <div>
                            <span class="title">{{item.kind}}</span><span
                                class="red--text ml-1">({{item.todaynum}})</span><br>
                            <span>主题：{{item.themenum}},贴数：{{item.articlenum}}</span><br>
                            <span>最后发帖：{{item.lately}}</span>
                        </div>
                    </v-layout>
                </v-card>
            </v-flex>
        </v-layout>
    </div>
</div>
</template>
</div>
<script>
    function test(event) {
        var imageurl = $(event).attr("src") === "/LxCommunity/static/image/减.png";
        console.info(imageurl)
        if (!imageurl) {
            $(event).parents(".body_conter").next().css({"display": "inline"});
            $(event).attr("src", "/LxCommunity/static/image/减.png");
        } else {
            $(event).parents(".body_conter").next().css({"display": "none"})
            $(event).attr("src", "/LxCommunity/static/image/加.png");
        }
    }

    new Vue({
        el: "#contentbody",
        data: {
            itemsbody: [
                {
                    forumtitle: "编程学院", forumBodies: [
                        {
                            img: "/LxCommunity/static/image/java.png",
                            kind: "Java",
                            themenum: "334",
                            articlenum: "3万",
                            lately: "3分钟前",
                            todaynum: "55"
                        },
                        {
                            img: "/LxCommunity/static/image/C语言.png",
                            kind: "C语言",
                            themenum: "314",
                            articlenum: "3.2万",
                            lately: "4分钟前",
                            todaynum: "15"
                        },
                        {
                            img: "/LxCommunity/static/image/php.png",
                            kind: "PHP",
                            themenum: "234",
                            articlenum: "3.4万",
                            lately: "3分钟前",
                            todaynum: "15"
                        },
                        {
                            img: "/LxCommunity/static/image/区块链.png",
                            kind: "区块链",
                            themenum: "14",
                            articlenum: "1.4万",
                            lately: "1分钟前",
                            todaynum: "57"
                        },
                        {
                            img: "/LxCommunity/static/image/安卓.png",
                            kind: "安卓",
                            themenum: "144",
                            articlenum: "1万",
                            lately: "7分钟前",
                            todaynum: "15"
                        },


                    ]
                }, {
                    forumtitle: "动脑学院", forumBodies: [
                        {
                            img: "/LxCommunity/static/image/java.png",
                            kind: "Java",
                            themenum: "334",
                            articlenum: "3万",
                            lately: "3分钟前",
                            todaynum: "55"
                        },
                        {
                            img: "/LxCommunity/static/image/C语言.png",
                            kind: "C语言",
                            themenum: "314",
                            articlenum: "3.2万",
                            lately: "4分钟前",
                            todaynum: "15"
                        },
                        {
                            img: "/LxCommunity/static/image/php.png",
                            kind: "PHP",
                            themenum: "234",
                            articlenum: "3.4万",
                            lately: "3分钟前",
                            todaynum: "15"
                        },
                        {
                            img: "/LxCommunity/static/image/区块链.png",
                            kind: "区块链",
                            themenum: "14",
                            articlenum: "1.4万",
                            lately: "1分钟前",
                            todaynum: "57"
                        },
                        {
                            img: "/LxCommunity/static/image/安卓.png",
                            kind: "安卓",
                            themenum: "144",
                            articlenum: "1万",
                            lately: "7分钟前",
                            todaynum: "15"
                        },


                    ]

                }


            ],
            banners: [],
            hot: '',
            hot_first_title: "",
            hot_first_body: "",
            hot_first_id: "1",
            hotbody: [1, 2, 3, 4, 5],

        },
        methods: {
            test: function (event) {

            },
            intopublish: function (data) {
                window.location.href = "/LxCommunity/content/publish/" + data;

            },
            removestyles: function (data) {

                var str = data.replace(/<[^>]*>/g, "");
                return str.replace(/&nbsp;/g, "");
            }

        },
        mounted() {
            var datas = this.itemsbody;
            var self = this
            axios.get("/LxCommunity/forum/findall").then(data => {
                this.itemsbody = data.data


            });
            axios.get("/LxCommunity/banner/all").then(data => {

                this.banners = data.data


            }) ,
                axios.get("/LxCommunity/content/hot").then(data => {
                    this.hot = data.data[0]
                    var str = data.data[0].content.replace(/<[^>]*>/g, "");
                    this.hot_first_body = str.replace(/&nbsp;/g, "");
                    for (let i = 1; i < data.data.length; i++) {
                        this.hotbody[i - 1] = data.data[i]
                    }


                })

        }


    });


</script>
<style>
    .marginbody {
        padding-left: 60px;
        padding-right: 60px;
    }

</style>
<script type="text/javascript">
    marquee("marquee", "marquee_text");

    function marquee(p, s) {
        var scrollWidth = document.getElementById(p).offsetWidth;
        var textWidth = document.getElementById(s).offsetWidth;
        var i = scrollWidth;
        console.log(scrollWidth, textWidth);

        function change() {
            i--;
            if (i < -textWidth) {
                i = scrollWidth;
            }
            document.getElementById(s).style.left = i + "px";
            window.requestAnimationFrame(change);
        }

        window.requestAnimationFrame(change);
    }
</script>
